<template>
    <div class="short-topic">
        <cus-textarea
            v-if="props.pageType === 'answer'"
            :modelValue="content1"
            type="textarea"
            :placeholder="placeholder"
            isOffset
            :max-length="500"
            :min-length="minLength"
            class="short-topic-field"
            @update:modelValue="changeAnswer"
            @blur="handleBlur"
        ></cus-textarea>
        <div v-else class="short-topic-content">
            评论内容：{{content1}}
        </div>
    </div>
</template>

<script setup>
import {onBeforeMount, ref, reactive, watchEffect } from 'vue';
import CusTextarea from '@/components/cus-textarea.vue';
const props = defineProps({
    id: {
        type: String,
        default: '',
    },
    content: {
        type: Object,
        default: () => {
            return {};
        }    
    },
    validObj: {
        type: Object,
        default: () => {
            return {};
        }    
    },
    userAnswerList: {
        type: Array,
        default: () => {
            return [];
        }    
    },
    pageType: {
        type: String,
        default: 'answer',
    },
    placeholder: {
        type: String,
        default: ''
    },
    isPreview: { // 预览状态下清空数据
        type: Boolean,
        default: false
    }
});

const col = ref(props.content && props.content.col && props.content.col[0]);

let answerObj = reactive({});
const content1 = ref('');

let maxLength = ref(0);
let minLength = ref(0);

const emit = defineEmits([
    'answer',
    'focused',
    'blur'
]);
defineExpose({
    changeAnswer,
})

onBeforeMount(() => {
    if (!props.isPreview) {
        initAnswer();
    }
});

watchEffect(() => {
    col.value = props.content && props.content.col && props.content.col[0];
    changeLength();
})

function initAnswer() {
    (props.userAnswerList || []).forEach(item => {
        answerObj[item.questionIndex] = item;
        col.value.answer = content1.value = item.answer || '';
    });
    changeLength();
    emit('answer', answerObj, '8', true);
}

function changeLength() {
    let temp = col.value.attr && col.value.attr.checkValue || {};
    minLength.value = temp.min || 0;
    maxLength.value = temp.max || 0;
}


function changeAnswer(val) {
    answerObj[col.value.index] = { answer: val };
    col.value.answer = val;
    emit('answer', answerObj, '8', props.id);
}

function handleBlur() {
    emit('blur');
}
</script>

<style lang="scss" scoped>
.short-topic {
    margin-top: 30px;
    .short-topic-content {
        color: var(--srt-main-text-color);
        line-height: 21px;
        word-break: break-all;
    }
}
</style>
